<template>
  <view
    class="base-slider flex gap-3 items-center w-full relative justify-between text-center mt-2"
  >
    <wd-switch v-if="isShowSwitch" v-model="checked" active-color="#c13432" size="32rpx" />

    <view class="mr-2">{{ title }}</view>
    <view class="flex-1 relative">
      <wd-slider
        v-model="value"
        :disabled="silderDisable"
        :min="min"
        :max="max"
        :step="0.01"
        hide-label
        hide-min-max
        active-color="#c13432"
      />
    </view>
    <view class="w-[80rpx] bg-[#f6f6f7] py-[4rpx]">{{ value }}</view>
  </view>
</template>
<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    disabled?: boolean;
    min?: number;
    max?: number;
    step?: number;
    title?: string;
    isShowSwitch?: boolean;
  }>(),
  {
    disabled: false,
    min: 0,
    max: 1,
    step: 0.01,
    isShowSwitch: false,
  },
);

const value = defineModel<number>("silderNum");
const checked = defineModel<boolean>("switchChecked", { required: false });

const silderDisable = computed(() => {
  if (props.isShowSwitch) {
    return !checked.value;
  }
  return props.disabled;
});
</script>
